<template>
  <div class="main">
    <h3>购物车</h3>
    <div class="container">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div class="item" v-for="item in list" :key="item.goods_id">
          <div class="good_left">
            <van-checkbox
              :name="item.goods_id"
              @click="changeOneGood"
            ></van-checkbox>
          </div>
          <div class="good_right">
            <van-card
              :price="item.goods_price"
              :title="item.goods_name"
              :thumb="item.goods_img"
            >
              <template #num>
                <van-stepper
                  v-model="item.goods_count"
                  disable-input
                  @plus="plus"
                  @minus="minus"
                />
              </template>
            </van-card>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <van-submit-bar
      :price="totalPrice"
      button-text="支付"
      @submit="onSubmit"
      :disabled="isPay"
    >
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
      <template #tip
        >您的订单为虚拟订单（支付后不发货）, 请勿支付大额款项！</template
      >
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Card,
  SubmitBar,
  Button,
  Checkbox,
  CheckboxGroup,
  Stepper,
  Dialog,
  Toast,
} from "vant";
Vue.use(Card);
Vue.use(Dialog);
Vue.use(Button);
Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Stepper);
import url from "@/config/url";
import moment from "moment";
export default {
  name: "Home",
  data() {
    return {
      result: [], // 单选选中
      checked: false, // 默认全选为否
      list: [], // 商品信息数组
      totalPrice: 0, //显示出来的总价
      isPay: true, // 支付按钮是否可用
      orderId: 0, //订单号
    };
  },
  watch: {
    result(val) {
      this.checked = val.length == this.list.length; //单选框数组长度和商品数组长度相等 全选框选中 反之亦然
    },
    totalPrice(val) {
      this.isPay = val == 0; //
    },
  },
  methods: {
    onSubmit() {
      //时间
      let now = moment().format("YYYYMMDDHHmmss");
      // 随机六位数
      let rand = Math.floor(Math.random() * 1000000);
      // 时间 加 随机六位数
      let code = now + rand;
      this.orderId = code;
      let href = `https://m.28sjw.com/alipay_wap/alipayapi.php?WIDout_trade_no=${code}&WIDsubject=Vue综合练习(金明星)&WIDtotal_fee=${
        this.totalPrice / 100
      }`;
      window.open(href, "_blank");
      let _this = this;
      // 异步请求是否付款成功
      function beforeClose(action, done) {
        if (action === "confirm") {
          this.$http
            .get(
              "https://m.28sjw.com/order/orderPayStatusCheck.php?_oid=" +
                _this.orderId
            )
            .then((ret) => {
              if (ret.data.finish_time) {
                Toast.success("恭喜你！支付成功");
              } else {
                Toast.fail("支付失败！");
              }
              done();
            });
        } else {
          done();
        }
      }
      // 弹出确认框
      Dialog.confirm({
        title: "是否已经支付成功?",
        message: "如果您已经支付成功，请点击“确定”",
        beforeClose,
      });
    },
    checkAll() {
      this.totalPrice = 0;
      this.checked
        ? this.$refs.checkboxGroup.toggleAll(true)
        : this.$refs.checkboxGroup.toggleAll(false);
      this.changeOneGood();
    },
    changeOneGood() {
      this.totalPrice = 0;
      this.result.forEach((item) => {
        this.list.forEach((good) => {
          if (good.goods_id === item) {
            this.totalPrice += good.goods_count * good.goods_price * 100;
          }
        });
      });
    },
    plus() {
      this.$nextTick(() => {
        this.changeOneGood();
      });
    },
    minus() {
      this.$nextTick(() => {
        this.changeOneGood();
      });
    },
  },
  created() {
    this.$http.get(url.getCart).then((ret) => {
      this.list = ret.cartInfo;
    });
  },
  components: {},
};
</script>

<style  scoped>
h3 {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  list-style: none;
  display: flex;
  margin-bottom: 10px;
}
.good_left {
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.good_right {
  width: 90%;
}
</style>
